<template>
	<div>
		<div class="price-cont">
			<view class="price-cont-list price-head">
				<view class="li">商品列表</view>
				<view class="li">会员价</view>
				<view class="li">购买</view>
				<view class="li">详细介绍</view>
			</view>
			<scroll-view scroll-y  :style="{height:scrollHeight+'px',paddingBottom:'10px'}">
				<div class="price-cont">
					<view class="price-cont-list-child" v-for="(item,index) in goodsList" :key="index">
						<view class="li">{{item.title}}</view>
						<view class="li">{{item.price}}元</view>
						<view class="li" @click="buyGoods(item.id)">购买</view>
						<view class="li" @click="buyGoods(item.id)">详细介绍</view>
					</view>
				</div>
			</scroll-view>
		</div>
		<fab :topBtn="isTopBtn"></fab>
		<foot-bottom class="footer"></foot-bottom>
	</div>
</template>

<script>
	import fab from '@/components/fab';
	import footBottom from '@/components/footBottom'; 
    import { shopGoodsList } from '@/api/shop';
	export default {
	    components: {
			fab,
			footBottom
		},
		data(){
			return {	
				isTopBtn:false,
				scrollHeight:0,
                goodsList:[]
			}
		},
        onLoad(e){
           shopGoodsList(1,99999,12,e.id,'').then((res)=>{
               this.goodsList = res.data.datas;
           }) 
        },
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					let footerHeight="";
					uni.createSelectorQuery().select('.price-head').fields({
						size: true
					}, (resdata) => {
						footerHeight = resdata.height;
						uni.createSelectorQuery().select('.price-head').fields({
							size: true
						}, (resdataT) => {
							this.scrollHeight = res.windowHeight - footerHeight - resdataT.height-100;
						}).exec();
					}).exec();
				}
			});
		},
		methods:{
            buyGoods(id){ //立即购买
                this.$Shop.navigateGoods(id)
            },
		},
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		}
	}
</script>
<style lang="scss">
	.price-cont{
		width:710rpx;
		margin:0 auto;
		.price-cont-list-child{
			display: flex;
			justify-content: space-between;
			padding:15rpx 10rpx;
			.li{
				text-align: center;
				width:16.6%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				&:nth-of-type(1){
					width: 50%;
					text-align: left;
				}
			}
		}
		.price-cont-list{
			display: flex;
			justify-content: space-between;
			background: #ed1475;
			padding:15rpx 10rpx;
			.li{
				text-align: center;
				width:16.6%;
				color:#fff;
				&:nth-of-type(1){
					width: 50%;
					text-align: left;
				}
			}
		}
	}
</style>
